<template>
  <div class="negative-info-page">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 负面信息列表 -->
      <div class="info-list">
        <div class="info-item" v-for="item in negativeList" :key="item.id">
          <!-- 标签和日期 -->
          <div class="item-header">
            <span class="tag" :class="getTagClass(item.type)">
              {{ item.type }}
            </span>
            <span class="date">
              <van-icon name="notes-o" />
              {{ item.date }}
            </span>
          </div>

          <!-- 分隔线 -->
          <div class="divider-line"></div>

          <!-- 内容 -->
          <div class="item-content">{{ item.content }}</div>
        </div>

        <!-- 空状态 -->
        <van-empty
          v-if="!negativeList || negativeList.length === 0"
          description="暂无负面信息"
        />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { termite } from "@/api";
export default {
  name: "negativeInfo",
  props: {
    controlId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      negativeList: [],
      refreshing: false, // 下拉刷新状态
    };
  },
  created() {
    this.getNegativeInfo();
  },
  methods: {
    // 获取标签样式类名
    getTagClass(type) {
      const typeMap = {
        行政处罚: "tag-penalty",
        诚信经营事件: "tag-penalty",
        负面舆情: "tag-public",
        虚报: "tag-credit",
        其他: "tag-other",
      };
      // 兜底：如果类型不匹配，默认使用 tag-other
      return typeMap[type] || "tag-other";
    },
    // 下拉刷新
    onRefresh() {
      this.getNegativeInfo();
    },
    getNegativeInfo() {
      termite
        .getPreventionControlNegativeQuery({
          controlId: this.controlId,
        })
        .then((res) => {
          console.log(res, "负面信息数据");
          if (res.errorCode === "000000") {
            // 数据映射处理
            this.negativeList = (res.data || []).map((item) => ({
              id: item.negativeId,
              type: item.negativeType,
              date: item.createTime,
              content: item.negativeInformation || "-",
            }));
          }
        })
        .catch((err) => {
          console.error("获取负面信息失败:", err);
          this.negativeList = [];
        })
        .finally(() => {
          // 结束刷新状态
          this.refreshing = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.negative-info-page {
  padding: 16px;
  padding-bottom: 20px;
  background-color: #f5f5f5;
  min-height: 100%;

  .info-list {
    height: calc(100vh - 90px - 32px);
    overflow-y: auto;
    padding-bottom: 16px;

    .info-item {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

      &:last-child {
        margin-bottom: 12px;
      }

      .item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .tag {
          display: inline-block;
          padding: 4px 12px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 500;
          line-height: 1.4;

          &.tag-penalty {
            background: #ffeef1;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
          }

          &.tag-public {
            background: #fff1de;
            color: #faad14;
            border: 1px solid #faad14;
          }

          &.tag-credit {
            background: #fff1f0;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
          }

          &.tag-other {
            background: #eaf3ff;
            color: #1890ff;
            border: 1px solid #1890ff;
          }
        }

        .date {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          color: #999;

          .van-icon {
            font-size: 14px;
          }
        }
      }

      .divider-line {
        height: 1px;
        background: #e8e8e8;
        margin-bottom: 12px;
      }

      .item-content {
        font-size: 14px;
        color: #333;
        line-height: 1.6;
        word-break: break-all;
      }
    }
  }
}
</style>
